<template>
<div class="orderdetail">
    <Header><span slot="back" class="back" @click="goback" >返回</span>
    <span slot="home" class="home" @click="gohome">首页</span></Header>
    <van-steps :active="active">
        <van-step>买家下单</van-step>
        <van-step>商家接单</van-step>
        <van-step>买家提货</van-step>
        <van-step>交易完成</van-step>
    </van-steps>
    <div class="recever-info" >
        <h3>收货人信息：</h3>
        <p>收货人:{{order.receiver}}</p>
        <p>收货地址：{{order.regions}}{{order.address}}</p>
    </div>
    <van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
  </van-divider>
    <h3>商品信息：</h3> 
    <div class="cart1" v-for="item in prodetail" :key="item._id">
        <img :src="item.product.coverImg" alt="" class="Img">
        <div class="info">
            <p>{{item.product.name}}</p>
            <p class="price">单价：{{item.product.price}}</p>
            <p>数量：{{item.quantity}}</p>
        </div>
    </div>
    <p>总金额：{{sum}}</p>
    <van-button type="primary" size="large">点击支付</van-button>
</div>
</template>
<script>
import Header from "../../components/HeaderorderDetail.vue";
import {reqGetorderdetail} from "../../api/reqgetorder";
export default {
data() {
return {
    prodetail:[],
    order:{},
    sum:0,
    active:1,
};
},
computed: {},
watch: {},
methods: {
    async initorderdetail(id){
        const result = await reqGetorderdetail(id);
        console.log(result);
        this.sum = result.order.price;
        this.order = result.order;
        result.details.forEach(item => {
            this.prodetail.push(item);
        });
    },
    goback(){
        this.$router.back();
    },
    gohome(){
        this.$router.push("/home");
    },
    
},
created() {
    const id = this.$route.params.id;
    this.initorderdetail(id);
},
mounted() {},
components: {
    Header,
},
};
</script>
<style scoped>
.recever-info{
    padding: 10px;
}
.cart1 {
  display: flex;
  height: 120px;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 10px;
}
.Img {
  width: 80px;
  height: 80px;
}
.info {
  flex: 1;
  padding-left: 10px;
}
.price{
    color:red;
}
</style>